<!--
    * Time    : 2020-12-22 13:47:54
    * Author  : zhangTj
    * Desc    : 地图页面查看指定地点
-->

<template>
    <div class="w750" :style="{ '--themescolor': themes.color }">
        <div id="container" class="w-100" :style="{ height: '100%' }"></div>
        <div class="position-fixed" style="bottom: 80px; right: 10px">
            <a
                ref="navigation"
                :href="`https://uri.amap.com/marker?position=${lng},${lat}&name=${title}`"
                class="d-flex flex-column a-center rounded-circle text-fff j-center"
                style="width: 50px; height: 50px; background: rgba(0, 0, 0, 0.4)"
            >
                <i class="iconfont icondaohang" style="font-size: 18px"></i>
                <span class="text-fff font-12">导航</span>
            </a>
        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
    name: '',
    components: {},
    data() {
        return {
            map: '',
            lng: '',
            lat: '',
            title: ''
        }
    },
    computed: {
        ...mapState(['themes'])
    },
    watch: {},
    created() {},
    destroyed() {},
    mounted() {
        this.lng = this.$route.query.lng
        this.lat = this.$route.query.lat
        this.title = this.$route.query.title
        this.map = new AMap.Map('container', {
            zoom: 17,
            resizeEnable: true,
            scrollWheel: true, // 是否支持鼠标滚轮放大缩小
            center: [this.lng, this.lat]
        })
        const marker = new AMap.Marker({
            map: this.map,
            position: new AMap.LngLat(this.lng, this.lat),
            label: {
                offset: new AMap.Pixel(20, 20), //修改label相对于maker的位置
                content: this.title
            }
        })
        this.map.add(marker)
        marker.on('click', (e) => {
            this.$refs.navigation.click()
        })
    },
    methods: {}
}
</script>

<style scoped></style>
